<template>
  <el-dialog
    title="查看"
    :visible.sync="dialogVisible"
    size="50%"
    custom-class="view-competition-pop title-list"
    :before-close="handleClose"
  >
    <div class="view-persion-pop">
      <el-form v-if="formParams&&formParams.entryType === 2" ref="form" label-width="120px">
        <el-form-item label="报名类型：">
          <el-radio-group v-model="formParams.entryType" :disabled="true" @change="changeRadio">
            <el-radio key="2" :label="2">个人报名</el-radio>
            <el-radio key="1" :label="1">团队报名</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="报名信息：" class="bm-infos">
          <span class="mr-20">{{ formParams.stuList[0].studentName }}</span>
          <span class="mr-20">{{ formParams.stuList[0].mobile }}</span>
          <span>应届/在校</span>
        </el-form-item>
        <el-form-item label="教育经历：" class="bm-infos">
          <span v-if="formParams.stuList" class="mr-20">{{ formParams.stuList[0].schoolName }}</span>
          <span v-if="formParams.stuList" class="mr-20">{{ formParams.stuList[0].education }}</span>
          <span v-if="formParams.stuList" class="mr-20">{{ formParams.stuList[0].major }}</span>
          <!-- <span class="mr-20">{{ formParams.stuList[0].major}}</span> -->
        </el-form-item>
        <el-form-item label="个人介绍：" class="bm-infos">
          <el-input
            v-model="formParams.introduce"
            :disabled="true"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 5}"
            placeholder="请输入内容"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item v-if="formParams.annexName" label="报名材料：" class="bm-infos">
          <div>
            <span style="margin-right: 20px;">{{ formParams.annexName }}</span>
            <span style="color: #1890ff; cursor: pointer;" @click="handleDownload(formParams.annexUrl)">下载</span>
          </div>
        </el-form-item>
        <el-form-item label="评分：" class="bm-infos">
          <span>{{ formParams.rateScore }}</span>
        </el-form-item>
      </el-form>

      <el-form v-if="formParams && formParams.entryType === 1" ref="form" label-width="120px">
        <el-form-item label="报名类型：">
          <el-radio-group v-model="formParams.entryType" :disabled="true" @change="changeRadio">
            <el-radio key="2" :label="2">个人报名</el-radio>
            <el-radio key="1" :label="1">团队报名</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="团队名称：" class="bm-infos">
          <span>{{ formParams.teamName }}</span>
        </el-form-item>
        <el-form-item label="团队介绍：" class="bm-infos">
          <el-input
            v-model="formParams.introduce"
            :disabled="true"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 5}"
            placeholder="请输入内容"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item label="报名信息：" class="bm-infos">
          <el-table
            v-if="formParams.stuList && formParams.stuList.length > 0"
            ref="singleTable"
            customer-class="team-infos-table"
            :data="formParams.stuList"
            highlight-current-row
            style="width: 100%"
          >
            <!-- <el-table-column type="index" width="50"></el-table-column> -->
            <el-table-column property="studentName" width="100">
              <template slot-scope="scope">
                <span style="border: 1px solid #ccc; border-radius: 50%;padding: 0 5px;">{{ scope.$index + 1 }}</span>
                <span style="margin-left: 5px;">{{ scope.row.studentName }}</span>
              </template>
            </el-table-column>
            <el-table-column property="mobile" width="120" />
            <el-table-column property="currentCapacity" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.jobType === 1">队长</span>
                <span v-if="scope.row.jobType === 2">队员</span>
              </template>
            </el-table-column>
            <el-table-column property="schoolName" width="120" />
            <el-table-column property="schoolName" width="120" />
            <el-table-column property="education" width="100" />
            <el-table-column property="major" width="120" />
          </el-table>
        </el-form-item>
        <el-form-item v-if="formParams.annexName" label="报名材料：" class="bm-infos">
          <div style="margin-right: 20px;color: #1890ff; cursor: pointer;" @click="handleDownload(formParams.annexUrl)">
            <span>{{ formParams.annexName }}</span>
            <span>下载</span>
          </div>
        </el-form-item>
        <el-form-item label="评分：" class="bm-infos">
          <span>{{ formParams.rateScore }}</span>
        </el-form-item>
      </el-form>

    </div>
    <div class="dialog-footer">
      <ViewPopBottomBtns 
        :scheduleType="scheduleType"
        :checkStatus="formParams.checkStatus" 
        :label-witdh="120" 
        @handleOut="handleOut"
        @handleClickGrade="handleGrade" 
        @handleIn="handleIn" 
        @handleGive="handleGive"
        @handleGet="handleGet"
        @cancel="handleCalcel" />
    </div>
    <GradePop ref="gradePop" @success="handleSuccess" />
    <BeSelected ref="beSelected" @success="handleSuccess" />
    <GiveGift ref="giveGift" @success="handleSuccess" />
  </el-dialog>
</template>
<script>
import { updateMessageTypeSort } from '@/api/inner-msg/index.js'
import FormGroup from '@/views/components/FormGroup'
import ViewPopBottomBtns from './viewPopBottomBtns.vue'
import { viewApi, batchUpdateStatus } from './../api'
import GradePop from './gradePop.vue'
import BeSelected from './beSelected.vue';
import GiveGift from './giveGift.vue'
export default {
  name: 'DragSrot',
  components: { FormGroup, ViewPopBottomBtns, GradePop, BeSelected, GiveGift },
  props: ['TYPE'],
  data() {
    return {
      dialogVisible: false,
      tableList: [],
      type: '',
      formParams: {},
      currentRow: {},
      projectId: '',
      scheduleType: '',
      tableData: [
        {
          name: 'cxxxxx',
          address: 'asaasfasf'
        }
      ],
      radio: '',
      title: ''
    }
  },
  mounted() {

  },
  beforeDestroy() {
    this.$dragging.$off('dragged')
  },
  methods: {
    changeRadio(val) {
      console.log(val, this.radio)
    },
    handleClose() {
      this.dialogVisible = false
      this.tableList = []
      this.$dragging.$off('dragged')
    },
    open({ projectId, scheduleType, row, title }) {
      this.projectId = projectId
      this.scheduleType = scheduleType
      this.currentRow = row
      this.dialogVisible = true
      this.title = title
      this.getDetails({ id: row.id, scheduleType })
    },
    async getDetails({ id, scheduleType }) {
      const { data, code } = await viewApi({
        id
      })
      if (code === 0) {
        this.formParams = data
      }
    },
    async handleConfirm() {
      const ids = this.tableList.map(v => v.id)
      const { code, msg } = await updateMessageTypeSort({
        ids
      })
      if (code !== 0) {
        this.$message.error(msg)
        return
      }
      this.handleClose()
      this.$emit('success')
    },
    handleDownload(url) {
      window.open(
        url,
        '_self'
      )
    },
    // 点击入选
    handleIn() {
      this.$refs.beSelected && this.$refs.beSelected.open({
        projectId: this.projectId,
        rowId: this.currentRow.id,
        scheduleType: this.scheduleType,
        type: 'row',
        title: this.title
      })
    },

    handleOut() {
      this.$confirm('是否確定撤销奖励？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { code } = await batchUpdateStatus({
            ids: [this.formParams.id],
            type: 0
          })
          if (code !== 0) return
          this.$message.success('撤销奖励成功');
          this.handleClose();
          this.$emit('success');
        })
    },
    handleGive() {
      this.$refs.giveGift && this.$refs.giveGift.open({
        rowId: this.currentRow.id,
        scheduleType: this.scheduleType,
        title: this.title
      })
    },
    handleGet() {
      this.$confirm('是否確定撤销奖励？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const { code } = await batchUpdateStatus({
          ids: [this.formParams.id],
          type: 0
        })
        if (code !== 0) return
        this.$message.success('撤销奖励成功')
        this.handleSuccess();
      })
    },

    handleSwitchCheckStatus() {
      this.formParams.checkStatus = this.formParams.checkStatus === 1 ? 0 : 1
    },
    handleGrade() {
      this.$refs.gradePop && this.$refs.gradePop.open({ entryId: this.currentRow.id })
    },
    handleCalcel() {
      this.dialogVisible = false
      this.tableList = [],
      this.type = '',
      this.formParams = {
        entryType: 1 // 1:团队;2:个人
      }
      this.currentRow = {}
      this.projectId = ''
      this.scheduleType = ''
    },
    handleSuccess() {
      this.handleSwitchCheckStatus();
      this.$emit('success')
    }
  }
}
</script>
<style lang="scss">
    .view-competition-pop {
        thead {
            display: none;
        }
    }
</style>
<style lang="scss" scoped>
    .mr-20 {
        margin-right: 20px;
    }
    .title-list {
        background:#fff;
        margin:100px auto 0;
        border: 1px solid red;

        .view-persion-pop {
            .bm-infos {
                // display: flex;
                // justify-content: flex-start;
            }
        }
        .dialog-footer {
            margin-top: 20px;
            justify-content: center;
            display: flex;
        }

    }
</style>
